<template>
  <div>
    <!-- <h3>当前最新的count值为：{{ count }}</h3> -->

    <!-- store 中 getter 值的访问: -->
    <!-- 第二种方式: 通过 mapGetters 函数在 computed 中映射为组件的数据  -->
    <h3>{{ showNum }}</h3>
    <button @click="btnHandler1">-1</button>
    <button @click="btnHandler2">-N</button>
  </div>
</template>

<script>
// 组件访问store中的数据：
// 第2种方式：1.从 vuex 中导入 mapState 函数
//           2.通过 mapState 函数将 state 中的数据映射为当前组件的 计算属性
import { mapState, mapGetters, mapMutations } from 'vuex'

// 注意:
// store 中的 state 存储数据,组件中使用 mapState 函数映射变量时在 computed 中生效
// store 中的 mutation 存储方法,组件中使用 mapMutation 函数映射时在 methods 中生效
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    btnHandler1() {
      this.sub()
    },
    btnHandler2() {
      this.subN(5)
    }
  }
}
</script>
